<template>
  <div id="centreLeft3">
    <div class="bg-color-black ">
        <div class="titles">
          <span>设备在线概况</span>
        </div>
        <div class="d-flex jc-center ai-center bodyHeight" >
          <div class="lshe">
            <div class="shebei mb20">
              <img src="../assets/shebei1.png" alt="" class="img">
              <div class="d-flex flex-column">
                <span class="name">在线设备</span>
                <span class="num">
                  <CountTo :startVal='0' :endVal='onlineCount' :duration='3000' :decimals='0' />
                </span>
              </div>
            </div>
            <div class="shebei">
              <img src="../assets/shebei2.png" alt="" class="img">
              <div class="d-flex flex-column">
                <span class="name">在线设备</span>
                <span class="num" style="color: #BBBEC9;">
                  <CountTo :startVal='0' :endVal='unOnlieCount' :duration='3000' :decimals='0' />
                </span>
              </div>
            </div>
          </div>
          <div class="charbox">
            <CentreLeft1Chart  style="width: 100%; height: 100%" :cdata="cdata"/>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import CentreLeft1Chart from "@/components/echart/centerLeft/centerLeft1Chart";
import { mapState } from 'vuex'; // 引入mapState
export default {
  data() {
    return {
      onlineCount: 0,
      unOnlieCount: 0,
      cdata: {
        xData: ["在线设备", "离线设备",],
        seriesData: [
          { value: 0, name: "在线设备" },
          { value: 0, name: "离线设备" }
        ]
      }
    };
  },
  components: {
    CentreLeft1Chart,
    CountTo
  },
  computed: {
    ...mapState({
      cityId: state => state.system.cityId, // 从Vuex Store中获取cityId
    }),
  },
  mounted() {
    this.getStatics();
    this.$watch('cityId', (newVal, oldVal) => { // 监听cityId的变化
      if (newVal !== oldVal) {
        this.getStatics(); // 当cityId变化时重新请求数据
      }
    });
  },
  methods: {
    getStatics() {
      this.$api.statistics({
        region_id: this.cityId, 
      }).then(res => {
          if(res.code == 0) {
            // console.log('89898',res.data)
              this.onlineCount = Number(res.data.onlineCount);
              this.unOnlieCount = Number(res.data.unOnlieCount);
              this.cdata.seriesData[0].value = Number(res.data.onlineCount);
              this.cdata.seriesData[1].value = Number(res.data.unOnlieCount);

          }
      })
    }
  }
};
</script>

<style lang="scss">
#centreLeft3 {
  height: 2.8625rem;
  width: 5.45rem;
  box-sizing: border-box;
  // border: 1px solid red;
  margin-bottom: 0.125rem;
  .bodyHeight {
    height: 2.5375rem;
  }
  .lshe {
    margin-right: 0.175rem;
  }
  .shebei {
    display: flex;
    align-items: center;
    .img {
      width: 0.65rem;
      height: 0.6875rem;
      margin-right: 0.175rem;
    }
    .name {
      font-size: 0.175rem;
      color: #fff;
      margin-bottom: 0.125rem;
    }
    .num {
      font-size: 0.3rem;
      color: #11FFD7;
      font-weight: bold;
    }
    
  }
  .mb20 {
      margin-bottom: 0.25rem;
  }
  .charbox {
    width: 3rem;
  }
}
</style>